<template>
  <div>
   <!--顶部导航  -->
 
  <van-nav-bar
 
  title="我的订单" left-arrow>
  <template #right>
    <van-icon name="search" size="18" />
    <!-- 筛选 -->
    <!-- <van-checkbox-group v-model="result">
  <van-cell-group>
    <van-cell
      v-for="(item, index) in list"
      clickable
      :key="item"
      :title="`复选框 ${item}`"
      @click="toggle(index)"
    >
      <template #right-icon>
        <van-checkbox :name="item" ref="checkboxes" />
      </template>
    </van-cell>
  </van-cell-group>
</van-checkbox-group> -->
  </template>
</van-nav-bar>

  <van-tabs v-model="active">
  <van-divider
 :style="{ borderColor: 'rgba(224,224,224)',margin:'5px 10px'}"/>  
  <van-tab
   title="全部订单">
    <div id="icon">
    <van-icon name="balance-list-o" size="90px" color="#aeaeae"/>
    <span>还没订单呢 ~</span>
  </div>
  </van-tab>
  <van-tab title="进行中">
    <div id="icon">
    <van-icon name="balance-list-o" size="90px" color="#aeaeae"/>
    <span>还没订单呢 ~</span>
  </div>
  </van-tab>
  <van-tab title="待支付">
    <div id="icon">
    <van-icon name="balance-list-o" size="90px" color="#aeaeae"/>
    <span>还没订单呢 ~</span>
  </div>
  </van-tab>
  <van-tab title="已支付">
    <div id="icon">
    <van-icon name="balance-list-o" size="90px" color="#aeaeae"/>
    <span>还没订单呢 ~</span>
  </div>
  </van-tab>
  </van-tabs>
  </div>
  
</template>

<script>
import { Toast } from 'vant';
  export default {
  methods: {
    onClickLeft() {
      Toast('返回');
    },
     toggle(index) {
      this.$refs.checkboxes[index].toggle();
    }
  },
  
  data() {
    return {
      
       list: ['a', 'b'],
      result: [],
    }
  },
  }
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
#icon{
  display: flex;
 
  flex-direction: column;
  align-items: center;
  margin: 100px 0;
  >span{
    
    color: #939393;
    margin: 10px 0;
  }
}
.van-tab--active>>>{
  color: red;
}
</style>